<template>
    <!-- 地块信息 制作时间：2024-3-12 -->
    <div class="agriMonitoring">
      <!-- 搜索框 -->
      <div class="backFont">
        <el-button icon="el-icon-arrow-left" @click="back()">返回</el-button>
        <div class="addMission" @click="lookReport()">
            <img class="lookReport" src="@/assets/images/lookReport.png">
            查看报告
          </div>
      </div>
      <!-- 列表 -->
      <div class="tableList">
        <div class="tableTop">
            <img class="lookReport" :src="historyLand.pictureLink">
            <div class="reportText">
                <div class="reportTitle">
                    <span>{{ form.plantingVariety }}</span><el-button size="mini">{{ form.varietyName }}</el-button>
                </div>
                <div class="reportLine">
                    <div>地块：{{ historyLand.landName }}</div>
                    <div>负责人：{{ historyLand.responsibfulePersonName }}</div>
                </div>
                <div class="reportLine">
                    <div>
                        种植开始时间：{{ form.createTime ? $moment(form.createTime).format('YYYY-MM-DD') : '' }}
                    </div>
                    <div>
                        种植结束时间：{{ form.endTime ? `${$moment(form.endTime).format('YYYY-MM-DD')}` : '' }}
                    </div>
                </div>
                <div class="reportLine">
                    <div>累计采收重量：<span>{{ form.harvestingQuantity }}公斤</span></div>
                    <div>状态：{{form.state === 1 ? '已结束' : '进行中'}}</div>
                </div>
            </div>
        </div>
        <div class="tableGreenBox mt20">
            <el-table
                class="tableGreen"
                :data="agrByLandList"
                style="width: 100%"
            >
                <el-table-column header-align="center" align="center" label="农事操作日期" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.time }}</span>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="农事类型" width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.type }}</span>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="农资">
                    <template slot-scope="scope">
                        <div v-if="scope.row.agriLists">
                            <div v-for="item in scope.row.agriLists" :key="item.id">{{item.name}}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="操作人" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.participants }}</span>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="备注" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.remark }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="tableGreenBox mt20">
            <el-table
                class="tableGreen"
                :data="applyList"
                style="width: 100%"
            >
                <el-table-column header-align="center" align="center" label="农事类型" width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.farmingType }}</span>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="农资名称" width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="生产厂家">
                    <template slot-scope="scope">
                        <span>{{ scope.row.manufacturer }}</span>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="日期" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="用量" width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.num }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
      </div>
      <report  ref="report"/>
    </div>
  </template>

<script>
import { getAgriculturalId, getAgriculturalDetail, getAgriculturalApplyList } from '@/api/agriLand'
import report from './components/report'
export default {
  name: 'history',
  components: {
    report
  },
  data () {
    return {
      params: {
      },
      tableData: [],
      agrByLandList: [],
      form: {},
      historyLand: {},
      applyList: []
    }
  },
  mounted () {
    this.params.baseId = this.$route.query.baseId
    this.params.landId = this.$route.query.landId
    if (sessionStorage.getItem('historyLand')) {
      this.$set(this, 'historyLand', JSON.parse(sessionStorage.getItem('historyLand')))
    }
    this.getList()
    this.getAgrById()
    this.getTypeObject()
  },

  methods: {
    // 查看报告
    lookReport () {
      this.$refs.report.getList()
    },
    // 获取种植详情
    async getTypeObject () {
      const res = await getAgriculturalDetail({ id: this.$route.query.id })
      this.$set(this, 'form', res.data)
    },
    // 返回
    back () {
      this.$router.go(-1)
    },
    // 获取农资使用列表数据
    async getList () {
      const res = await getAgriculturalApplyList({ agriId: this.$route.query.id })
      this.applyList = res.data
    },
    // 获取档案列表
    async getAgrById () {
      const res = await getAgriculturalId({ id: this.$route.query.id })
      this.agrByLandList = res.data
    },
    addLand (item) {
      this.$router.push({
        path: '/shuzhongtian/agriAreaAdd',
        query: {
          landId: item ? item.landId : null
        }
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
  .addMission {
    min-width: 1.2rem;
    height: 0.45rem;
    background: #00C586;
    border-radius: 3px;
    text-align: center;
    line-height: 0.45rem;
    color: #fff;
    .lookReport {
        height: 0.18rem;
        vertical-align: text-top;
        margin-right: 0.03rem
    }
  }
  .tableList {
    margin-top: 30px;
    .tableTop {
        background: #FAFAFA;
        padding: 20px 20px 12px 20px;
        display: flex;
        align-items: flex-start;
        .lookReport {
            width: 70px;
            height: 70px;
            border-radius: 50%;
        }
        .reportTitle {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            ::v-deep .el-button {
                color: #00C586;
                border: 1px solid #00C586;
                padding: 5px 7px;
                margin-left: 8px;
            }
        }
        .reportText {
            padding-left: 10px;
            width: calc(100% - 80px);
        }
        .reportLine {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            color: #666666;
            > div {
                min-width: 300px;
            }
        }
    }
  }
  </style>
